<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col
        :span="24"
        :xs="24"
      >
        <!-- 数据筛选表单 -->
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="100px"
        >
          <!-- 数据筛选表单组件 -->
          <el-form-item
            label="图片标题"
            prop="title"
          >
            <el-input
              v-model="queryParams.title"
              placehold
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item
            label="文件名"
            prop="fileName"
          >
            <el-input
              v-model="queryParams.fileName"
              placehold
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- 数据筛选操作按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>
        <el-row
          :gutter="10"
          class="mb8"
        >
          <el-col :span="3">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="handleAdd"
            >新增
            </el-button>
          </el-col>
        </el-row>

        <!-- 数据表格 -->
        <el-table
          v-loading="loading"
          :data="ossList"
        >
          <!-- 数据表格列 -->
          <el-table-column
            label="ID"
            align="center"
            prop="ossId"
            width="100px"
          />
          <el-table-column
            label="存储桶"
            align="center"
            prop="bucket"
            width="150px"
          />
          <el-table-column
            label="文件名称"
            align="center"
            prop="fileName"
            width="200px"
          />
          <el-table-column
            label="文件大小"
            align="center"
            prop="fileSize"
          />
          <el-table-column
            label="文件类型"
            align="center"
            prop="contentType"
            width="100px"
          />
          <el-table-column
            label="图片标题"
            align="center"
            prop="title"
            width="100px"
          />
          <el-table-column
            label="产品ID"
            align="center"
            prop="productId"
            width="100px"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
          />
          <!-- 数据行操作按钮 -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 数据分页加载 -->
        <el-pagination
          :current-page="pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 添加修改oss对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <!-- 数据编辑表单组件 -->
        <el-form-item
          label="存储桶"
          prop="bucket"
        >
          <el-input
            v-model="form.bucket"
            placeholder="请输入存储桶"
          />
        </el-form-item>
        <el-form-item
          label="文件名称"
          prop="fileName"
        >
          <el-input
            v-model="form.fileName"
            placeholder="请输入文件名称"
          />
        </el-form-item>
        <el-form-item
          label="文件原名称"
          prop="fileOriginalName"
        >
          <el-input
            v-model="form.fileOriginalName"
            placeholder="请输入文件原名称"
          />
        </el-form-item>
        <el-form-item
          label="文件大小"
          prop="fileSize"
        >
          <el-input
            v-model="form.fileSize"
            placeholder="请输入文件大小"
          />
        </el-form-item>
        <el-form-item
          label="文件类型"
          prop="contentType"
        >
          <el-input
            v-model="form.contentType"
            placeholder="请输入文件类型"
          />
        </el-form-item>
        <el-form-item
          label="图片标题"
          prop="title"
        >
          <el-input
            v-model="form.title"
            placeholder="请输入图片标题"
          />
        </el-form-item>
        <el-form-item
          label="产品ID"
          prop="productId"
        >
          <el-select
            v-model="form.productId"
            placeholder="请选择"
          >
            <el-option
              v-for="productItem in ProductOptions"
              :key="productItem.productId"
              :label="productItem.productName"
              :value="productItem.productId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 数据提交操作按钮 -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /** 导入axios Api */
  import { uploadOss, listOssByPage, listOss, getOss, addOss, updateOss, deleteOss } from '@/api/system/oss'
  import { listAllP } from '@/api/pos/product'
  export default {
    name: 'Oss',
    data() {
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 当前页
        pageNum: 0,
        // 每页数据量
        pageSize: 0,
        // Oss表格数据
        ossList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 数据查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          bucket: null,
          fileName: null,
          contentType: null,
          title: null
        },
        // 数据编辑表单
        form: {},
        // 下拉框选项数据
        ProductOptions: [],
        // 表单数据校验规则
        rules: {
          bucket: [
            { required: true, message: '存储桶不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getList()
    },
    mounted() {
      listAllP().then(response => {
        this.ProductOptions = response.data;
        console.log("成功获取响应数据：", response);
      }).catch(error => {
      });
    },
    methods: {
      /** 查询Oss数据列表 */
      getList() {
        this.loading = true
        listOssByPage(this.queryParams).then((response) => {
          console.log('oss查询数据', response)
          this.ossList = response.data.list
          this.ossList.forEach(item => {
            if (item.createTime !== null) {
              item.createTime = new Date(new Date(item.createTime).getTime() + 8 * 60 * 60 * 1000).toISOString().replace('T', ' ').slice(0, 19);
            }
          });
          this.total = response.data.total
          this.loading = false
        })
      },
      /** 处理分页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getList()
      },

      /** 数据编辑对话框取消按钮 */
      cancel() {
        this.open = false
        this.resetForm()
      },

      /** 数据编辑表单清空 */
      resetForm() {
        this.form = {
          ossId: null,
          bucket: 'misp-minio',
          fileName: null,
          fileOriginalName: null,
          fileSize: null,
          contentType: null,
          title: null
        }
      },

      /** 重置分页 */
      resetQueryParams() {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 5
      },

      /** 数据筛选搜索按钮 */
      handleQuery() {
        this.resetQueryParams()
        this.getList()
        this.$message.success('查询成功')
      },

      /** 数据筛选重置按钮 */
      resetQuery() {
        this.$refs.queryForm.resetFields()
        this.getList()
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.resetForm()
        this.open = true
        this.title = '添加Oss'
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.resetForm()
        getOss(row.ossId).then((response) => {
          this.form = response.data
          this.open = true
          this.title = '修改Oss'
        })
      },

      /** 数据提交按钮 */
      submitForm: function () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.ossId !== null) {
              updateOss(this.form).then((response) => {
                console.log('修改数据', response)
                this.open = false
                this.title = ''
                this.getList()
                this.$message.success(response.msg)
              })
            } else {
              addOss(this.form).then((response) => {
                this.open = false
                this.title = ''
                this.getList()
                this.$message.success(response.msg)
              })
            }
          }
        })
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除ID为"' + row.ossId + '"的数据项?', '警告', {
          confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
        })
          .then(function () {
            return deleteOss(row.ossId)
          })
          .then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
          .catch(() => { })
      }
    }
  }
</script>